<template>
  <div class="wechat-view--place" :style="{ height: _placeHeight }">
    <div
      class="wechat-view"
      id="wechatView"
      :class="[options.is_fixed == 1 ? 'wechat-view_fixed' : '']"
      :style="{
        padding: `${options.padding_tb || 0}px ${options.padding_lr || 0}px`,
      }"
      @click="handleClick"
    >
      <img :src="options.img ? `${options.img}` : wechat" @load="imgLoad" />
    </div>
    <van-dialog
      class="dialog"
      v-model="show"
      get-container="#app"
      @opened=""
      :show-confirm-button="false"
    >
      <div class="copy-content" :class="{ margin: $slots.default }">
        <template>
          <van-button
          style="font-size: 19px;"
            type="primary"
            block
            icon="wechat"
            class="open-wx"
            @click=""
          >
            打开微信添加客服
          </van-button>
        </template>
      </div>
      <div class="dialog-actions van-hairline--top no-select">
        <van-button class="cancel" size="large" @click="close"> 关闭 </van-button>
        <van-button
          class="confirm van-hairline--left"
          size="large"
          @click="onConfirm"
        >
          前往
        </van-button>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import wechat from "@/assets/image/wechat.png";

export default {
  name: "wechat-view",
  props: {
    view: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      wechat,
      mpScheme: "",
      placeHeight: 0,
      show: false
    };
  },
  computed: {
    options() {
      console.info("this.view.options", this.view.options);
      return this.view.options;
    },
    _placeHeight() {
      if (!this.placeHeight || this.options.is_fixed != 1) {
        return 'auto'
      }
      return `${this.placeHeight}px`
    }
  },
  methods: {
    async handleClick(ev) {
      const { click_type, skip_mp_id, is_dialog } = this.options;

      if (click_type == 2 && skip_mp_id) {
        if (is_dialog == 1) {
          this.show = true
          return;
        }
        else {
          this.skipAdMp(this.options);
          return;
        }
      }
      else if (click_type == 3 && skip_mp_id) {
        this.$emit("click", ev, 'showImage');
        return;
      }

      this.$emit("click", ev, 'click');
    },
    imgLoad(e) {
      console.info("图片信息", e)
      
      let imgWrapper = document.getElementById('wechatView');
      console.info("imgWrapper", imgWrapper.offsetHeight)
      this.placeHeight = imgWrapper.offsetHeight
    },
    close() {
      this.show = false;
    },
    onConfirm() {
      this.skipAdMp(this.options)
      return;
    }
  },
};
</script>
<style lang="scss" scoped>
.wechat-view--place {
  position: relative;
  width: 100%;
}
.wechat-view {
  &_fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #fff;
  }

  img {
    width: 100%;
    vertical-align: middle;
  }
}

.dialog-actions {
    display: flex;
    overflow: hidden;
    .confirm,
    .cancel {
      flex: 1;
      margin: 0;
      border: 0;
      font-size: 0.41111rem;
    }
    .cancel,
    .cancel:active {
      color: #909399;
    }
    .confirm,
    .confirm:active {
      color: #ee0a24;
    }
  }
</style>
